<template>
    <div class="table-box">
        <ProTable ref="proTable" :requestApi="api.getList" :columns="columns" :pagination="false" :height="165">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增', { parentId: 1 })">新增</el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
                {{ scope.row }}
            </template>
            <template #icon="scope">
                <SvgIcon :name="scope.row.icon" />
            </template>
            <!-- 隐藏状态 slot -->
            <template #seq="scope">
                <div>
                    <el-input-number style="width:60px;" @blur="(e: any) => handleNumberChange(e.target.value, scope.row.id)"
                        :controls="false" v-model="scope.row.seq" :min="1" size="small" />
                </div>
            </template>
            <!-- 隐藏状态 slot -->
            <template #hide="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div @click="changeHide(scope.row)">
                    <el-switch v-model="scope.row.hide" :active-text="scope.row.hide ? '是' : '否'" :active-value="true"
                        :inactive-value="false" />
                </div>
            </template>
            <!-- 缓存 slot -->
            <template #keepAlive="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div @click="changeKeepAlive(scope.row)">
                    <el-switch v-model="scope.row.keepAlive" :active-text="scope.row.keepAlive ? '是' : '否'"
                        :active-value="true" :inactive-value="false" />
                </div>
            </template>
            <!-- 是否固定 slot -->
            <template #affix="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div @click="changeAffix(scope.row)">
                    <el-switch v-model="scope.row.affix" :active-text="scope.row.affix ? '是' : '否'" :active-value="true"
                        :inactive-value="false" />
                </div>
            </template>
            <!-- 内嵌窗口 slot -->
            <template #iframe="scope">
                <!-- 如果插槽的值为 el-switch，第一次加载会默认触发 switch 的 @change 方法，所有在外层包一个盒子，点击触发盒子 click 方法 -->
                <div @click="changeIframe(scope.row)">
                    <el-switch :value="scope.row.iframe" :active-text="scope.row.iframe ? '是' : '否'" :active-value="true"
                        :inactive-value="false" />
                </div>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link :icon="CirclePlus"
                    @click="openDialog('新增', { parentId: scope.row.id })">新增</el-button>
                <!-- <el-button type="primary" link :icon="View" @click="openUserDialog('查看', scope.row)">查看</el-button>
                    <el-button type="primary" link :icon="EditPen" @click="openUserDialog('编辑', scope.row)">编辑</el-button>
                    <el-button type="primary" link :icon="EditPen" @click="openUserDialog('编辑', scope.row)">授权</el-button>
                    <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除</el-button> -->
                <el-dropdown>
                    <span class="el-dropdown-link" style="margin-left:8px;">
                        <el-button type="primary" size="small" text>
                            操作<el-icon class="el-icon--right">
                                <ArrowDown />
                            </el-icon>
                        </el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>
                                <el-button type="primary" link :icon="View"
                                    @click="openDialog('查看', scope.row)">查看</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="primary" link :icon="EditPen"
                                    @click="openDialog('编辑', scope.row)">编辑</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="primary" link :icon="Discount"
                                    @click="openMenuPermissionDialog(scope.row)">授权</el-button>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <el-button type="primary" link :icon="Delete" @click="onRemove(scope.row)">删除
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </ProTable>
        <FormDialog ref="formDialogRef"></FormDialog>
        <MenuPermissionDialog ref="menuPermissionDialogRef" />
    </div>
</template>

<script setup lang="tsx" name="menu">

import { ref, reactive, onMounted } from "vue";
import { CirclePlus, Delete, EditPen, View, ArrowDown, Discount } from "@element-plus/icons-vue";

import { useHandleData } from "/@/hooks/useHandleData";

import FormDialog from "./components/FormDialog.vue";
import MenuPermissionDialog from "./components/MenuPermissionDialog.vue";
import * as api from "/@/api/auth/menu";
import columnsFunction from './columns';
import ProTable from "/@/components/ProTable/index.vue";
import { hide } from "@popperjs/core";
import { ElMessage } from 'element-plus';

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

const state = reactive<any>({
    height: null
});

// 获取表头信息
const columns = columnsFunction();

onMounted(() => {
    const height = document.documentElement.clientHeight - 228
    state.height = height + 'px'
})

const showMessage = (res: any) => {
    if (res && res.code === 0) {
        ElMessage.success({ message: '操作成功' })
    } else {
        ElMessage.error({ message: '操作失败' })
    }
}


// 删除用户信息
const onRemove = async (params: any) => {
    await useHandleData(api.remove, { id: params.id }, `删除【${params.name}】角色`);
    proTable.value.refresh();
};

const handleNumberChange = async (seq: number, id: string) => {
    showMessage(await api.edit({ id, seq }));

}

//切换隐藏状态
const changeHide = async (row: any) => {
    showMessage(await api.edit({ id: row.id, hide: row.hide }));
};

//是否缓存
const changeKeepAlive = async (row: any) => {
    showMessage(await api.edit({ id: row.id, keepAlive: row.keepAlive }))
};

//切换固定
const changeAffix = async (row: any) => {
    showMessage(await api.edit({ id: row.id, affix: row.affix }))
};

//切换用户状态
const changeIframe = async (row: any) => {
    showMessage(await api.edit({ id: row.id, iframe: row.iframe }))
};



// 打开 dialog(新增、查看、编辑)
interface FormDialogExpose {
    acceptParams: (params: any) => void;
}
const formDialogRef = ref<FormDialogExpose>();
const openDialog = (title: string, rowData = {}) => {
    let params = {
        title: title,
        rowData: { ...rowData, seq: 0 },
        isView: title === "查看" ? true : false,
        apiUrl: title === "新增" ? api.add : title === "编辑" ? api.edit : "",
        getTableList: proTable.value.refresh
    };
    formDialogRef.value!.acceptParams(params);
};

const menuPermissionDialogRef = ref<FormDialogExpose>();
const openMenuPermissionDialog = (rowData: any = {}) => {
    let params = {
        title: '菜单权限管理',
        rowData: { id: rowData.id, permissionIdList: rowData.permissionIdList },
        getTableList: proTable.value.refresh
    };
    menuPermissionDialogRef.value!.acceptParams(params);
};
</script>
